<script>
export default {
  name: 'user'
}
</script>
<script setup>
import {ref} from "vue";
import {Plus, Search} from "@element-plus/icons-vue";
import useLoginStore from "@/stores/user/index.js";
import ArticleList from "@/components/article/article-list.vue";
import TopSearch from "@/components/top/top-search.vue";
import {ElMessage} from "element-plus";

const page = ref(1)
const size = ref(10)

//all or collect,默认全部
const activeName = ref("all")
const searchParam = ref("")
const svgShow = ref(true)

const loginStore = useLoginStore();
loginStore.personInfoAction()
loginStore.personAllOrCollectWorkAction(page.value, size.value, activeName.value, searchParam.value)


//页面加载获取默认获取个人作品


const clickShowBtn = () => {
  svgShow.value = !svgShow.value
}

//标签切换搜索
const handleTabClick = (tab) => {
  activeName.value = tab.props.name
  loginStore.personAllOrCollectWorkAction(page.value, size.value, activeName.value, searchParam.value)
}

//个人中心搜索
const searchBtn = () => {
  //搜索之后显示出来
  loginStore.personAllOrCollectWorkAction(page.value, size.value, activeName.value, searchParam.value)
}

//取消搜索
const cancelBtn = () => {
  svgShow.value = !svgShow.value
}


const isShow = ref(false)

//文件上传
const imageUrl = ref()
//文件上传超过限制执行
const uploadFileOver = () => {
  ElMessage({
    type: 'error',
    message: '文件上传超过数量限制'
  })
}
//放大图片调用此方法
const dialogVisible = ref(false)
const handlePictureCardPreview = () => {
  dialogVisible.value = true
}
//移除文件file调用
const uploadFileRef = ref()
const handleRemove = () => {
  imageUrl.value = ''
}
//图片上传成功时候回调
const successUploadFile = async (response) => {
  //清除检验结果
  imageUrl.value = response.data
  isShow.value = false
  //修改图片
  await loginStore.editImageAction(imageUrl.value)
  //刷新页面
  await loginStore.personInfoAction()
}


const changeImageBtn = () => {
  // 修改照片
  isShow.value = true

}

</script>

<template>
  <top-search/>
  <div class="user">
    <div class="top">
      <div class="user-info">
        <div class="left">
          <!--          <img src="@/assets/images/header.jpg" alt="#">-->

          <el-upload
              v-show="isShow"
              ref="uploadFileRef"
              :limit="1"
              action="/front/upload"
              list-type="picture-card"
              :on-success="successUploadFile"
              :on-exceed="uploadFileOver"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
          >

          </el-upload>
          <img @click="changeImageBtn" v-show="!isShow" style="width: 106px; height: 106px; cursor: pointer"
               :src="loginStore.personInfo.imageUrl"/>

        </div>
        <div class="right">
          <p style="font-size: 24px; font-weight: 700">{{ loginStore.userInfo.name }}</p>
          <div class="info-description">
            <p class="user-fans">
              <span class="num">{{ loginStore.personInfo.likeNum }}</span>
              <span class="info">获赞</span>
            </p>
            <p class="user-fans">
              <span class="num">{{ loginStore.personInfo.fansNum }}</span>
              <span class="info">粉丝</span>
            </p>
            <p class="user-fans">
              <span class="num">{{ loginStore.personInfo.focusOnNum }}</span>
              <span class="info">关注</span>
            </p>
          </div>

        </div>
      </div>
    </div>
    <div class="content">
      <div class="user-left">
        <!--        标签切换-->
        <el-tabs v-show="svgShow" v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
          <el-tab-pane label="全部" name="all">
            <article-list :article-list="loginStore.articleInfoList" :activeName="activeName.value"
                          :searchParam="searchParam.value"/>
          </el-tab-pane>
          <el-tab-pane label="收藏" name="collect">
            <article-list :article-list="loginStore.articleInfoList" :activeName="activeName"
                          :searchParam="searchParam"/>
          </el-tab-pane>
        </el-tabs>


        <svg style="margin-top: 10px" v-show="svgShow" @click="clickShowBtn" t="1739804314047" class="icon"
             viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="4187" width="32" height="32">
          <path
              d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0"
              p-id="4188"></path>
        </svg>


        <div class="search-content">
          <el-input
              v-show="!svgShow"
              v-model="searchParam"
              style="width: 100%; height: 32px"
              placeholder="搜索TA的作品"
              :prefix-icon="Search"
          >
            <template #append>
              <span style="cursor: pointer; color: #181818" @click="searchBtn">搜索</span>
              <span style="margin-left: 20px; ">|</span>
              <span style="margin-left: 20px; cursor: pointer" @click="cancelBtn">取消</span>
            </template>
          </el-input>

          <article-list v-show="!svgShow" :article-list="loginStore.articleInfoList" :activeName="activeName.value"
                        :searchParam="searchParam.value"/>
        </div>

      </div>

      <div class="desc-info">
        <div role="contentinfo" aria-label="公司执照" class="company-wrapper"><p> © <!-- -->2025<!-- --> 今日头条</p><a
            href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank" rel="noopener noreferrer nofollow"><img
            class="shdf"
            href="http://www.piyao.org.cn/yybgt/index.htm" target="_blank"
            rel="noopener noreferrer nofollow">网络谣言曝光台</a><br><a href="//www.12377.cn/" target="_blank"
                                                                        rel="noopener noreferrer nofollow">网上有害信息举报</a><br><a
            href="https://www.toutiao.com/article/7452662411682742847/" target="_blank"
            rel="noopener noreferrer nofollow">侵权举报受理公示</a><br>
          <p>MCN 专项举报：mcnjubao@toutiao.com</p>
          <p>未成年人相关举报：400-140-2108</p>
          <p>算法推荐专项举报：sfjubao@bytedance.com</p><a
              href="https://lf9-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/toutiao_web_pc/value_added_telecommunications_business_license.html"
              target="_blank" rel="noopener noreferrer nofollow">京ICP证140141号</a><br><a href="//beian.miit.gov.cn"
                                                                                           target="_blank"
                                                                                           rel="noopener noreferrer nofollow">京ICP备12025439号-3</a><br><a
              href="/license/" target="_blank" rel="nofollow">网络文化经营许可证 京网文〔2023〕3628-111号</a><br><a
              href="/business_license/" target="_blank" rel="nofollow">营业执照</a><a
              href="https://lf9-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/toutiao_web_pc/broadcast_license.html"
              target="_blank" rel="nofollow noreferrer">&nbsp;广播电视节目制作经营许可证</a><br><a
              href="https://lf9-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/toutiao_web_pc/publication_license.html"
              target="_blank" rel="nofollow noreferrer">出版物经营许可证</a><a
              href="https://lf9-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/toutiao_web_pc/commercial_performance_license.html"
              target="_blank" rel="nofollow noreferrer">&nbsp;营业性演出许可证</a>
          <p>互联网新闻信息服务许可证 11220190002</p><a
              href="https://lf3-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/toutiao_web_pc/drug_information_service_qualification_certificate.html"
              target="_blank"
              rel="nofollow noreferrer">药品医疗器械网络信息服务备案编号：（京）网药械信息备字（2023）第00006号</a><a
              href="https://lf9-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/toutiao_web_pc/internet_religious_information_service_license.html"
              target="_blank" rel="nofollow noreferrer">互联网宗教信息服务许可证：京（2022）0000074</a><br><a
              href="/a3642705768/" target="_blank" rel="nofollow">跟帖评论自律管理承诺书</a><br><a
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002002023" target="_blank"
              rel="noopener noreferrer nofollow"><img class="gongan"
                                                      src="">&nbsp;京公网安备
            11000002002023号</a><a
              href="http://www.cac.gov.cn/2022-08/12/c_1661927474338504.htm?spm=a1zaa.8161610.0.0.411a4140lZPDHE"
              target="_blank" rel="noopener noreferrer nofollow">网信算备110108823483902220017号</a><a
              href="https://www.cac.gov.cn/2022-08/12/c_1661927474338504.htm" target="_blank"
              rel="noopener noreferrer nofollow">网信算备110108823483904220019号</a><a
              href="https://www.cac.gov.cn/2022-08/12/c_1661927474338504.htm" target="_blank"
              rel="noopener noreferrer nofollow">网信算备110108823483903230017号</a>
          <p>公司名称：北京抖音信息服务有限公司</p></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
a {
  text-decoration: none;
  color: #999;
}

.user {
  margin-top: 100px;

  .top {
    width: 1034px;
    margin: 44px auto 0;

    .user-info {
      display: flex;
      align-items: center;


      .left {
        img {
          border-radius: 50%;
          width: 106px;
          height: 106px;
        }
      }

      .right {
        margin-left: 30px;

        .info-description {
          display: flex;

          .user-fans {
            display: flex;
            align-items: center;
            margin-top: 10px;
            margin-right: 40px;


            .num {
              margin-right: 4px;
              font-size: 24px;
            }

            .info {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

//主内容区域
.content {
  width: 1034px;
  margin: 44px auto 0;
  display: flex;


  .user-left {
    display: flex;
    justify-content: space-between;
    flex: 4;

    ::v-deep(.el-tabs__item) {
      font-size: 18px;
    }

    ::v-deep(.el-tabs__active-bar) {
      background-color: red;
    }

    ::v-deep(.el-tabs__item.is-active) {
      color: red;
    }
  }

  .desc-info {
    font-size: 14px;
    margin-left: 50px;
    flex: 2;

    p {
      margin-top: 10px;
      color: #999;
    }
  }
}

</style>